<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>194班课程表 - 2021年春季学期课程表</title>

		<link rel="stylesheet" href="../css/mdui.css">
		<script src="../js/mdui.js"></script>
		<script src="../js/html2canvas.js"></script>

		<link rel="icon" href="../img/favicon.ico">
		<link rel="shortcut icon" href="../img/favicon.ico">

		<style type="text/css">
			* {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}
		</style>
	</head>

	<body class="mdui-theme-primary-blue-grey">

		<!--appbar-->
		<div class="mdui-appbar">
			<div class="mdui-toolbar mdui-color-theme">

				<a href="../index.html" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">&#xe5c4;</i></a>
				<a href="javascript:;" class="mdui-typo-title">2021年春季学期课程表概览</a>
				<div class="mdui-toolbar-spacer"></div>
			
				<a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-menu="{target: '#main-menu'}"><i class="mdui-icon material-icons">more_vert</i></a>

				<ul class="mdui-menu" id="main-menu">
					<li class="mdui-menu-item">
						<a href="javascript:dialog_tableimg();" class="mdui-ripple">保存表格到图库</a>
					</li>
				

				</ul>

			</div>
		</div>

		<!--表格-->
		<table class="mdui-table" border="1" id="table1">
			<thead>
				
				<tr>
					<th>课时/星期</th>
					<th>星期一</th>
					<th>星期二</th>
					<th>星期三</th>
					<th>星期四</th>
					<th>星期五</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>学前心理</td>
					<td>计算机</td>
					<td>自习</td>
					<td>声乐</td>
					<td>学前教育</td>
	
				</tr>

				<tr>
					<td>2</td>
					<td>学前心理</td>
					<td>计算机</td>
					<td>专业主题(单)</td>
					<td>声乐</td>
					<td>学前教育</td>
			
			
				</tr>

				<tr>
					<td>3</td>
					<td>学前卫生</td>
					<td>舞蹈</td>
					<td>美术</td>
					<td>思修</td>
					<td>口语</td>
		
					
				</tr>

				<tr>
					<td>4</td>
					<td>学前卫生</td>
					<td>舞蹈</td>
					<td>美术</td>
					<td>思修</td>
					<td>英语</td>
			
				

				</tr>

				<tr>
					<td>5</td>
					<td>自习</td>
					<td>体育</td>
					<td>大学语文</td>
					<td>自习</td>
					<td>钢琴</td>
				
	
				</tr>

				<tr>
					<td>6</td>
					<td>体育</td>
					<td>自习</td>
					<td>大学语文</td>
					<td>英语</td>
					<td>钢琴</td>
				
	
				</tr>

				<tr>
					<td>7</td>
					<td>班会</td>
					<td>自习</td>
					<td>自习</td>
					<td>自习</td>
					<td>自习</td>
				
	
				</tr>

			</tbody>
		</table>

		<div class="mdui-dialog" id="dialog_tableimg" style="width: 100%;height: 400px;">
			<div class="mdui-dialog-title" id="dia_title1">长按或右键保存图片</div>
			<div class="mdui-dialog-content" style="text-align: center;">

				<img style="width: 100%;height: 300px;" id="img2" />

			</div>

			<div class="mdui-dialog-actions">
				<button class="mdui-btn mdui-ripple" mdui-dialog-confirm>确认</button>
			</div>
		</div>

	</body>

	<script type="text/javascript">
		function dialog_tableimg() {
			var dialog_tableimg = new mdui.Dialog('#dialog_tableimg');
			dialog_tableimg.open();

			document.getElementById("dia_title1").innerText = "正在生成...";

			html2canvas(document.getElementById("table1")).then(function(canvas) {
				var dataUrl = canvas.toDataURL();
				var newImg = document.getElementById("img2");
				newImg.style.width = "100%";
				newImg.style.height = "auto";

				newImg.src = dataUrl;

				document.getElementById("dia_title1").innerText = "长按或右键保存图片";

			});

		}
	</script>

</html>